<template>
  <div class="chaidanact" v-loading="loading">

    <div class="flex " style="align-items: center;">
    	<el-select class="mb20" v-model="cd_number" filterable	placeholder="请选择拆单数量" @change="changenumber">
    		<el-option label="不拆单" value="0"></el-option>
    		<el-option v-for="(item,index) in 5" :key="index" :label="item"
    			:value="item"></el-option>
    	</el-select>
    	<el-tooltip class="item" effect="light"
    		content="一单多发，单个订单给用户发货多个商品，系统会在您指定的时间执行自动拆单，拆单后的订单将按照商品编码自动匹配，并重新走审核生产流程"
    		placement="top">
    		<i class="el-icon-question" style="color: rgb(64, 155, 250); font-size: 25px;  margin-left: 20px; cursor: pointer;"></i>
    	</el-tooltip>

    </div>
    <el-radio-group class="mb20" v-if="cd_number!='0'" v-model="cd_type_radio">
    	<el-radio :label="3">符合条件拆单</el-radio>
    	<el-radio :label="4">指定时间拆单</el-radio>
    </el-radio-group>

    <div v-for="(item,index) in split_list" :key="index" style="background: rgb(246, 249, 252); padding: 20px; margin-top:10px; border: 1px #ccc solid; color: #999; border-radius: 3px; margin-bottom: 20px;">
    	<!-- 符合条件拆单 -->
    	<div v-if="cd_type_radio==3" style="font-size: 14px;" >
    		<div class="mb20">拆分订单{{index+1}}<span v-if="index == 0" style="color: #409EFF;">(非原订单)</span></div>
    		<!-- <div  class="mb20" style="padding-left: 20px;">
    			当“<span v-if="index == 0">原订单</span><span v-else>拆分订单{{index}}</span>”订单状态变更为“<span style="color: #EEF7FF;">生产失败</span>“时，则执行本次拆单<span style="color: #AFAFAF;">（每10分钟执行一次）</span>
    		</div> -->

        <div class="kflexc mb20">
        	<div style="text-align: right; padding-left: 20px;" v-if="index == 0">当“原订单”订单状态变更为：</div>
        	<div style="text-align: right; padding-left: 20px;" v-if="index != 0">拆分订单{{index}}状态变更为：</div>

        	<div class="zidong bai kflexc">
            <el-select v-model="item.split_status" filterable multiple placeholder="请选择状态">
            	<el-option label="生产失败" value="-460"></el-option>
            	<el-option label="待开卡" value="450"></el-option>
              <el-option label="已发货" value="550"></el-option>
            </el-select>

          </div>
          <div>时，则执行本次拆单（每10分钟执行一次）</div>
        </div>

    		<div class="kflexc">
    			<div style=" text-align: right; padding-left: 20px; margin-right: 30px;">拆分订单所属商品：</div>
    			<div class="bai">
    				<el-input v-model="item.sku" placeholder="商品编码"></el-input>
    			</div>
    		</div>
    	</div>
    	<!-- 指定时间拆单 -->
    	<div v-if="cd_type_radio==4" style="font-size: 14px;" >
    		<div class="mb20">拆分订单{{index+1}}<span v-if="index == 0"style="color: #409EFF;">(非原订单)</span></div>

    		<div class="kflexc mb20">
    			<div style="width: 140px; text-align: right; padding-left: 20px;">拆单执行时间：</div>
    			<div class="zidong bai kflexc">
            <div>原订单进入{{moban.platform_name}}系统</div>
            <div><el-input v-model="item.later" min="0" type="number"></el-input></div>
            <div>小时后拆单</div>
          </div>
    		</div>

    		<div class="kflexc mb20">
    			<div style="width: 140px;text-align: right; padding-left: 20px;">拆分订单所属商品：</div>
    			<div class="bai">
    				<el-input v-model="item.sku" style="width: 250px;" placeholder="商品编码"></el-input>
    			</div>
    		</div>

    		<div class="kflexc">
    			<div style="width: 140px; text-align: right; padding-left: 20px;">拆单前检测：</div>
    			<div class="bai">
    				<el-checkbox v-model="item.check_deliver">拆分执行时，若
    					<span style="color: #409EFF;" v-if="index == 0">原订单</span>
    					<span style="color: #409EFF;"	v-if="index != 0">拆分订单{{index}}</span>已发货成功，则该订单不再拆分
    				</el-checkbox>
    			</div>
    		</div>
    	</div>



    </div>
    <!-- 按条件拆单文案 -->
    <div v-if="cd_number!='0'" style="font-size: 14px;">
    	<div v-if="cd_type_radio==3" style="color: #B4B4B4; line-height: 35px;">
    		<div>拆单说明：</div>
    		<div>1、反复失败的订单只会在第一次失败拆分，后续失败不会拆分</div>
    		<div>2、若”拆分订单1”不满足条件未拆分，则后续拆分订单2、3都不会执行拆分</div>
    		<div>3、拆分订单为独立订单与原订单没有关联关系</div>
    		<div>4、拆分定单在外部订单号后增加”-CF1”字样用以区分</div>
    	</div>
    	<!-- 指定时间拆单文案 -->
    	<div v-if="cd_type_radio==4" style="color: #B4B4B4; line-height: 35px;">
    		<div>拆单说明：</div>
    		<div>1、拆分订单1、2同时勾选“拆单前检测”后“拆分订单1”拆单失败不影响“拆分订单2”的拆单，拆分订单2会成功拆单。</div>
    		<div>2、拆分后的订单完全独立，原订单执行删除、修改订单状态等不会影响拆分订单</div>
    		<div>3、拆单功能只针对自己发展的订单，无法拆单分销商发展订单</div>
    		<div>4、拆分订单不会去电商平台同步发货信息，只在{{moban.platform_name}}有发货记录</div>
    	</div>
    </div>

    <el-button type="danger" round @click="jiancha">保存</el-button>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'chaidanact',
    data() {
      return {
        cd_number:"0",
        cd_type_radio:3,
        split_list:[],
        loading:false
      }
    },
    created() {
      this.getpeizhi()
    },
    mounted() {

    },
    methods: {
      jiancha:function(){
        let arr = []
        if(this.split_list.length != 0){
          this.split_list.forEach(item=>{
            arr.push(item.sku)
          })
          axios.post('/api/plan-market/shop/skus/check',{skus:arr})
          	.then(response => {
          		if (response.data.msg.code == 0) {
          			this.baocun()
          			this.loading = false
          		} else {
          			this.loading = false
          			this.$message.error('拆分订单所属商品' + response.data.msg.info);
          		}
          	})
        }else{
          this.baocun()
          this.loading = false
        }
      },

      baocun:function(){
        if(this.cd_number != 0){
          this.split_list.forEach((item,index)=>{
          	if(this.cd_type_radio==3){
          		//按条件拆单
          		item.check_deliver = 2
          		item.later = "0"
          	}else if(this.cd_type_radio==4){
          		//按时间拆单
          		if(item.check_deliver == true){
          			item.check_deliver = 1
          		}else{
          			item.check_deliver = 0
          		}
          	}

          	item.page_id = this.$route.query.id
          	item.split_number = index+1
          })
        }else{
          this.split_list = []
        }

        let datas = {
        	data:this.split_list,
        	page_id:this.$route.query.id
        }

        axios.post('/api/plan-market/split/config2', datas)
        	.then(response2 => {
        		if (response2.data.msg.code == 0) {
        			this.$message({
        				message: '保存成功！',
        				type: 'success'
        			});
        		} else {
        			this.$message.error(response2.data.msg.info);
        		}
        	})
      },
      changenumber: function(val) {
      	let v = val - this.split_list.length
      	if (v > 0) {
      		for (let i = 0; i < v; i++) {
      			// 当前商品id  拆单商品sku 第几个拆单  是否检测发货1检测0不 later是多少小时后拆单 1=1小时
      			this.split_list.push({
      				page_id: "",
      				sku: "",
      				split_number: "",
      				check_deliver: "",
      				later: ""
      			})
      		}
      	} else {
      		this.split_list.length = val
      	}
      },
      getpeizhi:function(){
      	axios.get('/api/plan-market/split/configs2?page_id=' + this.$route.query.id)
      		.then(response => {
      			if (response.data.msg.code == 0) {

      				if(response.data.data.length == 0){
      					this.cd_number = '0'
      				}else{
      					this.cd_number = response.data.data.length
      				}

      				this.split_list = response.data.data

      				this.split_list.forEach(item => {
      					if(item.check_deliver == 1){
      						item.check_deliver = true
      						this.cd_type_radio = 4
      					}else if(item.check_deliver == 0){
      						item.check_deliver = false
      						this.cd_type_radio = 4
      					}else if(item.check_deliver == 2){
      						this.cd_type_radio = 3
      					}
      				})

      			} else {
      				this.$message.error(response.data.msg.info);
      				return false
      			}
      		})
      },
    }

  }
</script>

<style scoped lang="scss">
  /deep/ .el-input__inner{ width:300px; background: #F3F5F8; border-color:#F3F5F8 ;}
  .w120{
    /deep/ .el-input__inner{ width:125px;}
  }
  /deep/ .el-button--danger{background-color: #2974FF; border-color: #2974FF;}
  .bai{
    /deep/ .el-input__inner{ background: #fff; border-color:#F3F5F8 ;}
  }
</style>
